<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<%@include file="link.jsp" %>
<html>
<head>
    <title>Title</title>
    <meta charset="UTF-8">
</head>
<style>
    ul {
        list-style: none;
    }

    .div_1 {
        color: blue;
    }

    .div_2 {
        margin-left: 30%;
    }

    .div_2_1 {
        margin-left: 5%;
        padding-left: 20%;

        /*margin-right: 0;*/
    }

    .div_3 {
        margin-left: 21%;
        padding-left: 10%;
    }
</style>
<body>
<div id="div_body">
    <div class="div_1">
        >话题详情
    </div>
    <hr>
    <c:if test="${not empty title}">
        <div>
    <span class="div_2">
         作者&nbsp;:&nbsp;${title.user.uname} &nbsp;
        <%--如果是作者字节就不显示关注--%>
                   <c:if test="${sessionScope.loginUser==null||sessionScope.loginUser.uid==title.user.uid}">

                   </c:if>
        <c:if test="${not empty loginUser}">
            <c:if test="${sessionScope.loginUser.uid!=title.user.uid}">
                <a href="#">关注</a>
            </c:if>
        </c:if>

        <span class="div_2_1">${title.tcreateTime}</span>
    </span>

        </div>
        <div>
            &nbsp;&nbsp;&nbsp;&nbsp;${title.tcontent}<%--话题内容--%>
        </div>
        <hr>
        <div id="div_messages">
                <%--遍历留言--%>
            <c:forEach var="message" items="${title.messages}">
                <ul>
                    <li>
            <span>
                ${message.user.uname}&nbsp;:&nbsp;${message.mcreateTime}
            </span>
                        <span class="div_3">
                            <%--如果没有登录就让他不可以点赞--%>
                        <c:if test="${empty loginUser}">
                            <button disabled="disabled">赞</button>
                            <span id="zan">${message.user.listZan.size()}</span>
                            <button disabled="disabled">虚</button>
                            <span id="xu">${message.user.listXu.size()}</span>
                        </c:if>
                        <c:if test="${not empty loginUser}">
                            <%--
                           如果当前用户点赞了就设置该 按钮颜色 为实现
                            --%>

                            <button id="zan"
                                    onclick="dianZan(${message.mid},${message.user.uid},${requestScope.title.tid})">赞</button>
                            <span>${message.user.listZan.size()}</span>
                            <button id="xu"
                                    onclick="dianXu(${message.mid},${message.user.uid},${requestScope.title.tid})">虚</button>
                            <span>${message.user.listXu.size()}</span>
                        </c:if>


                        &nbsp;&nbsp;
                        <%--如果是当前用户删除留言--%>
                        <c:if test="${sessionScope.loginUser.uname == message.user.uname}">
                            <button style="color: red" type="button"
                                    onclick="messageDelete(${message.mid},${requestScope.title.tid})">
                                删除留言</button>
                        </c:if>

            </span></li>
                    <li>
            <span>
               &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                ${message.mcontent}
            </span>
                    </li>
                </ul>
            </c:forEach>


        </div>
    </c:if>
    <c:if test="${empty title}">
        <h3>该用户还没发表博客？</h3>
    </c:if>
    <hr>

    <c:if test="${empty sessionScope.loginUser}">
        <h4 style="color: red">你尚未登录！请先登录</h4>
        <a href="${pageContext.request.contextPath}/index.jsp?pageName=user_regist.jsp">没有账号？点我注册</a>
    </c:if>

    <c:if test="${not empty sessionScope.loginUser}">
        <div>
            <textarea rows="4px" cols="70px" placeholder="我也来说一句(只支持文本)" name="m_content"></textarea>
            <input type="button" onclick="publish()" value="发表评论">&nbsp;&nbsp;&nbsp;
            <input type="reset" value="重置">
        </div>
    </c:if>


</div>
</body>
<script>
    //添加留言
    function publish() {
        let mcontent = $("textarea").val();
        if (mcontent == undefined || mcontent == "") {
            alert("请输入内容")
        }
        //.getMcontent(), .getMcreateTime(), .getUid(), .getTid()
        else {
            let uid =${sessionScope.loginUser.uid};
            let titleId = ${requestScope.title.tid};
            $.ajax({
                url: "${pageContext.request.contextPath}/message/addition",
                type: "post",
                data: {"mcontent": mcontent, "uid": uid, "tid": titleId},
                success: function () {
                    alert("更新成功")
                    //成功重新加载 容器
                    $("#div_body").load("/title/showMessage?tid=${requestScope.title.tid} #div_body");
                },
                error: function () {
                    alert("更新失败")
                }
            })
        }
    }

    //删除留言
    function messageDelete(mid, tid) {
        $.ajax({
            url: '${pageContext.request.contextPath}/message/delete',
            data: {"mid": mid, "tid": tid},
            type: "get",
            success: function () {
                alert("更新成功")

                $("#div_body").load("/title/showMessage?tid=${requestScope.title.tid} #div_body");
            },
            error: function () {
                alert("更新失败")
            }
        })
    }

    //点赞
    function dianZan(mid, uid, tid) {
        let text = $("#zan").text();
        // alert(zan)
        $.ajax({
            url: "${pageContext.request.contextPath}/endorse/updatezx",
            type: "post",
            data: {"mid": mid, "uid": uid, "tid": tid, "text": text},
            success: function (data) {
                alert(data)

            },
            error: function (data) {
                alert(data)
            }
        })
    }

    function dianXu(mid, uid, tid) {
        let text = $("#xu").text();
        // alert(xu)
        $.ajax({
            url: "${pageContext.request.contextPath}/endorse/updatezx",
            type: "post",
            data: {"mid": mid, "uid": uid, "tid": tid, "text": text},
            success: function (data) {
                alert(data)


            },
            error: function (data) {
                alert(data)
            }
        })
    }
</script>
</html>
